<template>
    <div>
       <div class="Addresslocation">
            <div class="ress_header">
                <input type="text" placeholder="搜索/城市" class="text-input" v-model="Inthesearch">
                <img src="../../assets/personal/images/search-icon.png">
                <div class="ress_clear" @click="cler">取消</div>
                <div class="clix"></div>
            </div>
            <div>
                <div class="dingwei">
                    <h1>定位</h1>
                    <h2>{{currentCity}}<span @click="getwxconfig">点我重新定位</span></h2>
                </div>
                <div class="remen">
                    <h1>热门城市</h1>
                        <ul>
                            <li v-for="item in dizhi_json" :key="item.id" @click="Hotcity(item.name)">
                                {{item.name}}
                            </li>
                        </ul>
                    <div class="clix"></div>
                </div>
                <div class="A_Znav" v-show="''==Inthesearch">
                    <ul>
                        <li>区县定位热门</li>
                        <li v-for="item in A_zJson" :key="item.name"><a :href=item.id>{{item.name}}</a></li>
                    </ul>
                </div>
                <div class="show_list"  v-if="!Inthesearch">
                     
                    <ul v-for="(item,indx) in city_list_n" :key="indx">
                        <li v-show="''==Inthesearch"><a :name="item.pinyin.toUpperCase()">{{item.pinyin.toUpperCase()}}</a></li>
                        <ul>
                           <li v-for="(iteme,ind) in item.areas" :key="ind"  style="background: #fff;border-bottom: 1px solid #f1f1f1;" @click="Hotcity(iteme.name)">
                                {{iteme.name}}
                            </li>
                        </ul>
                    </ul>
                    
                    <!-- <div v-for="(iteme,ind) in citys_n" >
                        <div v-if="ind==0 || citys_n[ind-1]['pinyin'] != iteme.pinyin  ">{{iteme.pinyin}}</div>
                        <div>{{iteme.name}}</div>
                    </div> -->
                </div>
                <div class="show_list"  v-else>
                    <ul>
                        <li v-for="(item,i) in searcitys" :key="i">{{item.name}}</li>
                    </ul>
                </div>
                
            </div>
        </div>
        
    </div>
</template>
<script>
//import wx from 'weixin-js-sdk'
export default {
     data () {
        return {
            dizhi_json: [
                { "name": '北京市', "id": '1' },
                { "name": '上海市', "id": '3' },
                { "name": '广州市', "id": '321' },
                { "name": '深圳市', "id": '323' },
                { "name": '南京市', "id": '195' },
                { "name": '杭州市', "id": '208' },
                { "name": '成都市', "id": '375' },
                { "name": '武汉市', "id": '290' },
            ],
            A_zJson: [
                { "name": 'A', "id": '#A', "pinyin": 'a' },
                { "name": 'B', "id": '#B', "pinyin": 'b' },
                { "name": 'C', "id": '#C', "pinyin": 'c' },
                { "name": 'D', "id": '#D', "pinyin": 'd' },
                { "name": 'E', "id": '#E', "pinyin": 'e' },
                { "name": 'F', "id": '#F', "pinyin": 'f' },
                { "name": 'G', "id": '#G', "pinyin": 'g' },
                { "name": 'H', "id": '#H', "pinyin": 'h' },
                { "name": 'I', "id": '#I', "pinyin": 'i' },
                { "name": 'J', "id": '#J', "pinyin": 'j' },
                { "name": 'K', "id": '#K', "pinyin": 'k' },
                { "name": 'L', "id": '#L', "pinyin": 'l' },
                { "name": 'M', "id": '#M', "pinyin": 'm' },
                { "name": 'N', "id": '#N', "pinyin": 'n' },
                { "name": 'O', "id": '#O', "pinyin": 'o' },
                { "name": 'P', "id": '#P', "pinyin": 'p' },
                { "name": 'Q', "id": '#Q', "pinyin": 'q' },
                { "name": 'R', "id": '#R', "pinyin": 'r' },
                { "name": 'S', "id": '#S', "pinyin": 's' },
                { "name": 'T', "id": '#T', "pinyin": 't' },
                { "name": 'U', "id": '#U', "pinyin": 'u' },
                { "name": 'V', "id": '#V', "pinyin": 'v' },
                { "name": 'W', "id": '#W', "pinyin": 'w' },
                { "name": 'X', "id": '#X', "pinyin": 'x' },
                { "name": 'Y', "id": '#Y', "pinyin": 'y' },
                { "name": 'Z', "id": '#Z', "pinyin": 'z' },
            ],
            city_list_n: [],
            city_list_o: [],
            Inthesearch:'',
            currentCity:'北京市',
            page:1,
            pageSize:50,
            indx:'',
            companyCount:'',//总数
            searcitys:[],
            citys_o:[],
            // citys_n:[]
            
        }
     },
     created() {
            this.getwxconfig();
        },
     mounted() {
            this.city_list();
    },
    methods:{
        city_list() {//地区接口
            this.$http.get(this.APIURL_PREFIX + "/api/wap/districts/selectAll", { params: { name: this.Inthesearch } }).then((response) => {
                this.companyCount=response.data.data.companyCount
                var ar = response.data.data.districts;
                this.citys_o  = ar;
                var arz = [];
                ar.forEach( (element,i) => {
                    if( arz.length==0 || element.pinyin != arz[arz.length-1]["pinyin"]){
                        arz.push({pinyin:element.pinyin , areas:[]})
                    }
                    arz[arz.length-1]["areas"].push(element);
                });
                this.city_list_o = arz;
                this.city_list_n = this.city_list_o 
                console.log(this.city_list_n )
            }).catch(function (err) {
                console.log(err)
            });
         },
         Hotcity: function (name) {
           this.$router.push({ name: 'Index',query:{City:name,lat:-1,lon:-1}})
        },
        cler:function(){
            this.$router.push({ name: 'Index'})
        },
         map() {
            var vm = this;
            var geocoder = new qq.maps.Geocoder({
                complete: function (result) {   //解析成功的回调函数
                    console.log(result.detail);
                    var address_city = result.detail.addressComponents.city   //市
                    vm.currentCity = address_city;
                    console.log("微信获取当前城市:", vm.currentCity)
                }
            })
            geocoder.getAddress(new qq.maps.LatLng(this.latitude1, this.longitude1))
            },
         getwxconfig() {
            var vm = this;
            this.$http.get(this.APIURL_PREFIX + "/api/wxs/config?url=" + escape(location.href.split('#')[0])).then((response) => {
                console.log(response.data);
                var appid = 'wx488ae3f57360b7ea';
                wx.config({
                    debug: false,
                    appId: appid,
                    timestamp: response.data.data.timestamp,
                    nonceStr: response.data.data.noncestr,
                    signature: response.data.data.signature,
                    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'scanQRCode', 'getLocation']
                });
                wx.ready(function () {
                    wx.getLocation({
                        type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                        success: function (res) {
                            var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                            var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                            // if(latitude==""||longitude==""){
                            //    vm.msg='失败'
                            //    layer.msg("获取地理位置失败")
                            // }else{
                            vm.latitude1 = latitude;
                            vm.longitude1 = longitude;
                            vm.shopsList = [];
                            vm.busy = false;
                            vm.loadall = false;
                            vm.map()
                            console.log("微信获取经度:", vm.latitude1);
                            console.log("微信获取纬度:", vm.longitude1);
                            // }
                        },
                        fail: function () {//失败
                            vm.msg = '失败'
                        },
                        cancel: function () {//取消
                            vm.latitude1 = -1
                            vm.longitude1 = -1
                        }

                    });
                    // wx.onMenuShareTimeline({
                    //   title: document.title,
                    //   link: Config.activity_host+'/wap/wx/login?fk=1-15-'+userId+'-'+$.urlParam("fk").split("-")[3],
                    //   imgUrl:app.imgSrc,
                    //   desc:$("#desc p").html(),
                    //   success: function () {
                    //   },
                    //   cancel: function () {
                    //   }
                    // });
                    // wx.onMenuShareAppMessage({
                    //   title: document.title,
                    //   link: Config.activity_host+'/wap/wx/login?fk=1-15-'+userId+'-'+$.urlParam("fk").split("-")[3],
                    //   imgUrl:app.imgSrc,
                    //   desc:$("#desc p").html(),
                    //   success: function () {
                    //   },
                    //   cancel: function () {
                    //   }
                    // });
                    // wx.onMenuShareQQ({
                    //   title: document.title,
                    //   link: Config.activity_host+'/wap/wx/login?fk=1-15-'+userId+'-'+$.urlParam("fk").split("-")[3],
                    //   imgUrl:app.imgSrc,
                    //   desc:$("#desc p").html(),
                    //   success: function () {
                    //   },
                    //   cancel: function () {
                    //   }
                    // });
                    // wx.onMenuShareWeibo({
                    //   title: document.title,
                    //   link: Config.activity_host+'/wap/wx/login?fk=1-15-'+userId+'-'+$.urlParam("fk").split("-")[3],
                    //   imgUrl:app.imgSrc,
                    //   desc:$("#desc p").html(),
                    //   success: function () {
                    //   },
                    //   cancel: function () {
                    //   }
                    // });
                    // wx.onMenuShareQZone({
                    //   title: document.title,
                    //   link: Config.activity_host+'/wap/wx/login?fk=1-15-'+userId+'-'+$.urlParam("fk").split("-")[3],
                    //   imgUrl:app.imgSrc,
                    //   desc:$("#desc p").html(),
                    //   success: function () {
                    //   },
                    //   cancel: function () {
                    //   }
                    // });

                });
            }).catch(function (err) {
                console.log(err)
            });

        }
          
    },
    watch: {
        Inthesearch: function (newVal, ordVal) {
            console.log(newVal);
            let re = new RegExp('^' + newVal + '[\u4E00-\u9FA5A-Za-z].{0,10}', 'gi');
            if (newVal) {
                this.searcitys = this.citys_o.filter(function (item) {  
                    console.log("1")
                    return re.test(item.name);
                  
                })
            }
            else {
                this.searcitys = this.citys_o
            }

        }
    }
    
}
</script>
<style scoped>
.Addresslocation {
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  top: 0;

}

.ress_header {
  padding: 10px;
}

  .ress_header input {
      width: 80%;
      float: left;
      border: none;
      border-radius: 10px;
      padding-left: 50px;
      position: relative;
  }

  .ress_header img {
      position: absolute;
      left: 20px;
      top: 18px;
  }

.ress_clear {
  line-height: 40px;
  font-size: 20px;
}

.dingwei, .remen {
  padding: 10px;
  text-align: left;
  background-color: #fff;
}

  .dingwei h1, .remen h1 {
      font-size: 14px;
      color: #b5b5b5;
  }

  .dingwei h2 {
      font-size: 15px;
      line-height: 50px;
  }

      .dingwei h2 span {
          float: right;
          margin-right: 50px;
          color: red;
      }

  .remen ul li {
      width: 65px;
      height: 25px;
      margin: 20px 20px 20px 0;
      border: 1px red solid;
      text-align: center;
      border-radius: 5px;
      float: left;
      background: #f2f2f2;
      line-height: 25px;
  }

.A_Znav {
  position: fixed;
  right: 8px;
  top: 90px;
}

  .A_Znav ul li {
      width: 30px;
      color: #b5b5b5;
  }

      .A_Znav ul li a {
          color: #b5b5b5;
      }

.bigger {
  font-weight: bold;
}

.show_list {
  text-align: left;
}

  .show_list ul li {
      padding-left: 20px;
      height: 35px;
      line-height: 35px;
  }

      .show_list ul li a {
          color: red;
      }

.bgbg {
  background: rgba(0, 0, 0, 0.5)
}

.clix {
  clear: both;
}

.personindex {
  height: 100%;
  overflow: scroll;
}

div.ruitao_erweima {
  background: rgba(0,0,0,.6);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  text-align: center;
  padding-top: 35%;
}

  div.ruitao_erweima > div {
      font-size: 1.2em;
      color: #000;
      background: #fff;
      width: 80%;
      margin: 0 auto;
      padding: 0.2em 0;
  }

  div.ruitao_erweima img {
      width: 80%;
  }

.pnd {
  padding: 15px;
  padding-top: 0px;
}

.text1 {
  display: block;
  width: 165px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  float: left;
}

.ress_header_ree {
  width: 100%;
  height: 90%;
  position: fixed;
  z-index: 99;
  background-color: #000;
}
</style>

